import React, { Component, PropTypes } from 'react';
import {
  View,
  Platform,
  StyleSheet,
  TouchableOpacity,
  Text,
  Image,
  TextInput,
} from 'react-native';

import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
import fetchModifyName from '../../actions/ModifyPersonActions';
import { fetchPersonIntro } from '../../actions/profileActions';

export default class ModifyName extends Component {
  static propTypes = {
    dispatch: PropTypes.func,
    parentIntro: PropTypes.string,
    PerformanceData: PropTypes.object,
  };
  constructor(props) {
    super(props);
    this.state = {
      text: this.props.parentIntro,
    };
  }
  back() {
    this.props.navigator.pop();
  }

  commit() {
    const { dispatch } = this.props;
    const PerformanceData = this.props.PerformanceData;
    let data = {};
    if (PerformanceData && PerformanceData.data) {
      data = PerformanceData.data;
      if (data && data.cur_user) {
        dispatch(fetchModifyName(data.cur_user.username, data.cur_user.sex, this.state.text,
          `${data.cur_user.utype}`, data.cur_user.uid, data.cur_user.workbeginday, data.cur_user.email, '', ''));
      }
    }
    dispatch(fetchPersonIntro(this.state.text));
    if (navigator) {
      this.props.navigator.pop();
    }
  }

  render() {
    return (
      <View style={[style.flex, style.bg]}>
        <View style={[style.header, style.row]}>
          <TouchableOpacity
            style={[style.flex, style.titleStart]}
            onPress={() => this.back()}
          >
            <Image style={style.backIcon} source={require('../../img/go_back.png')} />
          </TouchableOpacity>
          <View style={[style.flex, style.center]}>
            <Text style={style.nameTitle}>个人介绍</Text>
          </View>
          <TouchableOpacity
            style={[style.flex, style.titleEnd]}
            onPress={() => this.commit()}
          >
            <Text style={style.commit}>完成</Text>
          </TouchableOpacity>
        </View>
        <View style={style.container}>
          <TextInput
            style={style.textinput}
            defaultValue={this.state.text}
            onChangeText={text => this.setState({ text })}
            underlineColorAndroid="transparent"
            multiline
          />
        </View>
      </View>
    );
  }
}
const style = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bg: {
    backgroundColor: '#F5F5F5',
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
  header: {
    height: PxToDp(46),
    backgroundColor: '#fff',
  },
  center: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleStart: {
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingLeft: PxToDp(10),
  },
  titleEnd: {
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingRight: PxToDp(10),
  },
  backIcon: {
    width: PxToDp(20),
    height: PxToDp(24),
  },
  nameTitle: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
    color: '#333333',
  },
  commit: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(18),
    color: '#458fff',
  },
  container: {
    height: PxToDp(136),
    backgroundColor: '#fff',
    marginTop: PxToDp(11),
    paddingLeft: PxToDp(15),
  },
  textinput: {
    borderWidth: 1,
    borderColor: '#fff',
    borderStyle: 'solid',
    width: '100%',
    paddingLeft: PxToDp(15),
    flexWrap: 'wrap',
    height: PxToDp(136),
    fontSize: PxToDp(16),
    textAlignVertical: 'top',
  },
});
